<template>
  <Teleport to="body">
    <div class="chat-container">
      <div ref="SMCRef" class="show-msg-container">
        <template v-for="(msg, index) in msgList" :key="index">
          <MessageBox :data="msg" />
        </template>
      </div>
      <div class="edit-msg-container">
        <textarea class="textarea" rows="4" v-model="content"></textarea>
        <el-button @click="sendMsg" type="primary" class="operate">
          发送
        </el-button>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import MessageBox from "./MessageBox.vue";
import { useRemoveEvent } from "@/hooks/usewindow";
// store
import user from "@/store/user";

import socket, { sendAllMsg } from "@/utils/socket.io";
// api
import { getAllPublicComment } from "@/service/comment";
import local from "@/utils/local";
interface IMsg {
  uid: number;
  content: string;
  avatarUrl: string;
  username: string;
}
const content = ref("");
const msgList = ref<IMsg[]>([]);
const SMCRef = ref<HTMLDivElement>();

const userStore = user();
const myInfo = ref();
// socket链接
socket.connect();
// 发送信息
const sendMsg = () => {
  // 没有消息 不允许使用
  if (!userStore.isLogin) {
    return ElMessage({
      type: "warning",
      message: "还没有登录~请登录后再聊天噢"
    });
  }
  if (content.value.trim().length === 0) {
    return ElMessage({
      type: "warning",
      message: "发送的内容不能为空! 请重新编辑内容"
    });
  } else {
    // 发送
    sendAllMsg({
      username: userStore.userInfo?.username,
      avatarUrl: userStore.userInfo?.avatarUrl,
      id: userStore.userInfo?.id,
      content: content.value
    });
    content.value = "";
  }
};

const keyupSend = (event: KeyboardEvent) => {
  if (event.key === "Enter") {
    return sendMsg();
  }
};
onMounted(async () => {
  window.addEventListener("keyup", keyupSend);

  // 获取历史评论
  const comment: any = await getAllPublicComment();
  msgList.value.push(...comment.data.comment);
  // 有评论第一次滚动到底部
  setTimeout(() => {
    if (comment && msgList.value.length > 0) {
      SMCRef.value &&
        (SMCRef.value.scrollTop = SMCRef.value?.lastElementChild!.offsetTop);
    }
  }, 100);

  myInfo.value = local.get("pinia-userStore");
  // 监听消息
  socket.on("sendOtherMsg", (data: IMsg) => {
    msgList.value.push({ ...data, uid: userStore.userInfo?.id as number });
    nextTick(() => {
      SMCRef.value &&
        (SMCRef.value.scrollTop = SMCRef.value?.lastElementChild!.offsetTop);
    });
  });
});

useRemoveEvent("keyup", keyupSend);
</script>
<style scoped lang="less">
.chat-container {
  // margin-top: -60px;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  .show-msg-container {
    flex: 1;
    padding: 0 20px 5px;
    overflow-y: scroll;
  }
  .edit-msg-container {
    position: relative;
    height: 20%;
    border-top: 1px solid #ccc;
    display: flex;
    overflow: hidden;
    .textarea {
      border-color: transparent;
      outline: none;
      width: 100%;
      height: 75%;
      resize: none;
      padding: 5px 10px 0;
    }
    .operate {
      position: absolute;
      right: 2rem;
      bottom: 0.5rem;
      flex: 1;
    }
  }
}
</style>
